import { App, Modal, Setting } from 'obsidian';
import I18N from 'main';
import Url from 'src/url';
import { t } from 'src/lang/inxdex';

// ==============================
//          首次运行向导
// ==============================
export class WizardModal extends Modal {
    i18n: I18N;
    frame: HTMLIFrameElement;
    img: HTMLImageElement;
    html: HTMLElement;
    title: HTMLParagraphElement;
    version: HTMLParagraphElement;
    constructor(app: App, i18n: I18N) {
        super(app);
        this.i18n = i18n
    }

    public async Main() {
        const { contentEl } = this;
        // @ts-ignore
        const modalEl: HTMLElement = this.contentEl.parentElement;
        modalEl.addClass('i18n-wizard__container');
        this.contentEl.addClass("i18n-wizard__box");

        this.img = this.contentEl.doc.createElement("img");
        this.img.addClass('i18n-wizard__img');
        this.img.src = this.imgDate;
        this.contentEl.appendChild(this.img);

        this.title = this.contentEl.doc.createElement("p");
        this.title.addClass('i18n-wizard__title');
        this.title.innerHTML = 'Obsidian-I18N';
        this.contentEl.appendChild(this.title);
        
        this.version = this.contentEl.doc.createElement("p");
        this.version.addClass('i18n-wizard__version');
        this.version.innerHTML = `${t('向导_通用_版本')} ${this.i18n.manifest.version}`;
        this.contentEl.appendChild(this.version);

        const videoTutorial = new Setting(contentEl);
        videoTutorial.setName(t('向导_视频_标题'));
        videoTutorial.setDesc(t('向导_视频_描述'));
        videoTutorial.controlEl.createEl('button', { text: t('向导_通用_浏览'), cls: ['i18n-button', `i18n-button--${this.i18n.settings.I18N_BUTTON_TYPE}-primary`, `is-${this.i18n.settings.I18N_BUTTON_SHAPE}`] }, (el) => {
            el.addEventListener("click", async () => { window.open(Url.VIDEO_TUTORIAL); });
        });

        const documentationTutorial = new Setting(contentEl);
        documentationTutorial.setName(t('向导_文档_标题'));
        documentationTutorial.setDesc(t('向导_文档_描述'));
        documentationTutorial.controlEl.createEl('button', { text: t('向导_通用_浏览'), cls: ['i18n-button', `i18n-button--${this.i18n.settings.I18N_BUTTON_TYPE}-info`, `is-${this.i18n.settings.I18N_BUTTON_SHAPE}`] }, (el) => {
            el.addEventListener("click", async () => { window.open(Url.DOCUMENTATION_TUTORIAL); });
        });

        const qq = new Setting(contentEl);
        qq.setName(t('向导_QQ_标题'));
        qq.setDesc(t('向导_QQ_描述'));
        qq.controlEl.createEl('button', { text: t('向导_通用_加入'), cls: ['i18n-button', `i18n-button--${this.i18n.settings.I18N_BUTTON_TYPE}-info`, `is-${this.i18n.settings.I18N_BUTTON_SHAPE}`] }, (el) => {
            el.addEventListener("click", async () => { window.open(Url.QQ_GROUP); });
        });
    }

    async onOpen() { await this.Main() }
    async onClose() { this.contentEl.empty() }
    imgDate = ``
}